<template>
  <div class="main">
    <page-header></page-header>
    <back :showBack="false" :showSearch="true"></back>
    <div class="content flex justify-between px-2">
      <div>
        <div class="second">
          <div class="flex align-center justify-center" @click="handleSale">
            <div class="item-title flex align-center justify-center">
             企业类型
            </div>
          </div>
          <div class="flex align-center">
            <div id="first-chart"></div>
            <div class="flex-1">
              <div
                class="flex lengeds pointer"
                v-for="(items, i) in firstData"
                :key="i"
                @click="clickCompanyType(items)"
              >
                <div
                  class="tipcolor"
                  :style="{ 'background-color': colorList[i] }"
                ></div>
                <div class="flex align-center">
                  <p class="names mr-2">{{ items.name }}</p>
                  <div class="flex">
                    <div class="num">{{ items.value }}户</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="first">
          <div class="flex align-center justify-center">
            <div class="item-title flex align-center justify-center">
              销售数据展示
            </div>
          </div>
          <div class="flex align-center justify-between px-4 mt-1">
            <div class="pl-5 flex align-center" @click="togslist">
              <!--<img src="../../assets/img/icon01.png" alt="" />-->
              <div class="flex align-center">
                <div class="first-title">规上企业</div>
                <p class="first-num one">
                  {{ dataOneLeftInfo.gsCompanyNumber }}<span>户</span>
                </p>
              </div>
            </div>
            <div class="pl-5 flex align-center" @click="toBiling('总开票量')">
              <!--<img src="../../assets/img/icon01.png" alt="" />-->
              <div class="flex align-center">
                <div class="first-title">总开票量</div>
                <p class="first-num one">
                   948,150<span>张</span>
                </p>
              </div>
            </div>
          </div>
          <div class="flex align-center justify-between px-4">
            <div class="pl-5 flex align-center" @click="togslist">
              <!--<img src="../../assets/img/icon01.png" alt="" />-->
              <div class="flex align-center">
                <div class="first-title">规上企业销售</div>
                <p class="first-num two">
                  {{ dataOneLeftInfo.gsCompanyDun }}<span>万吨</span>
                </p>
              </div>
            </div>
            <div class="pl-5 flex align-center" @click="handleCompanyList('总销售量')">
              <!--<img src="../../assets/img/icon01.png" alt="" />-->
              <div class="flex align-center">
                <div class="first-title">总销售量</div>
                <p class="first-num two">
                  {{ homeMiddleData.allXsl }}<span>万吨</span> 
                </p>
              </div>
            </div>
          </div>
          <div class="flex align-center justify-between px-4">
            <div class="pl-5 flex align-center" @click="togslist">
              <!--<img src="../../assets/img/icon01.png" alt="" />-->
              <div class="flex align-center">
                <div class="first-title">规上企业纳税</div>
                <p class="first-num three">{{dataOneLeftInfo.gsCompanyNsYuan}}<span>万元</span></p>
              </div>
            </div>
            <div class="pl-5 flex align-center" @click="tolist">
              <!--<img src="../../assets/img/icon01.png" alt="" />-->
              <div class="flex align-center">
                <div class="first-title">总纳税</div>
                <p class="first-num three">{{homeMiddleData.allNs}}<span>万元</span></p>
              </div>
            </div>
          </div>
          <div class="flex align-center justify-between px-4">
            <div class="flex align-center" @click="togslist">
              <!--<img src="../../assets/img/icon01.png" alt="" />-->
              <div class="flex align-center">
                <div class="first-title"></div>
              </div>
            </div>
            <div class="pl-5 flex align-center" @click="toBilingl('总中转量')">
              <!--<img src="../../assets/img/icon01.png" alt="" />-->
              <div class="flex align-center">
                <div class="first-title">总中转量</div>
                <p class="first-num three">{{homeMiddleData.allZzNumber}}<span>吨</span></p>
              </div>
            </div>
          </div>
        </div>
        <div class="third">
          <div class="flex align-center justify-center" @click="tosearCh">
            <div class="item-title flex align-center justify-center">
              产品销售同比
            </div>
          </div>
          <div id="second-chart"></div>
        </div>
      </div>
      <div>
        <div class="content-center">
          <bmap :mapHeight="604"></bmap>
          <div class="flex align-center justify-center">
            <div class="item" @click="handleCompanyList('今日销售量')">
              <div class="tip">今日销售量</div>
              <div class="tipnum">{{homeMiddleData.todayXsl}}<span>万吨</span></div>
            </div>
            <div class="item" @click="toBiling('今日开票量')">
              <div class="tip">今日开票量</div>
              <div class="tipnum">
                {{ homeMiddleData.todayKpl }}<span>张</span>
              </div>
            </div>
            <div class="item" @click="handleWarning">
              <div class="tip">今日预警</div>
              <div class="tipnum">
                {{ homeMiddleData.yjCount || 0 }}<span>个</span>
              </div>
            </div>
          </div>
        </div>
        <div class="third">
          <div class="flex align-center justify-center" @click="tosearCh">
            <div class="item-title flex align-center justify-center">
              {{ thirdDataObj.year }}年{{ thirdDataObj.month }}产品销量
            </div>
          </div>
          <div id="third-chart"></div>
        </div>
      </div>
      <div>
        <div class="four">
          <div class="flex align-center justify-center" @click="tosearCh">
            <div class="item-title flex align-center justify-center">
              销售品种占比分析
            </div>
          </div>
          <div class="flex align-center justify-start mr-2 mt-1 ml-2 year_input" style="position:relative;z-index:100">
            <el-select
              v-model="monthValue"
              placeholder="请选择年份"
              @change="changeMonth"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="flex align-center mt--2">
            <div id="four-chart"></div>
            <div class="flex-1 maxheight_chart">
              <div class="flex lengeds" v-for="(items, i) in fourData" :key="i">
                <div
                  class="tipcolor"
                  :style="{ 'background-color': colorList[i] }"
                ></div>
                <div class="flex align-center">
                  <p class="names mr-2">{{ items.name }}</p>
                  <div class="flex align-center">
                    <div class="num">{{ items.value }}万吨</div>
                    <!--<div class="zb">{{ items.ratio }}</div>-->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="five">
          <div class="flex align-center justify-center" @click="tosearCh">
            <div class="item-title flex align-center justify-center">
              {{ fiveDataObj.month }}销售产品环比
            </div>
          </div>
          <div id="five-chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
import bmap from "@/components/mapsGd.vue"; 
import pageHeader from "@/components/header.vue";
import indexApi from "@/api/index/index";
import back from "@/components/back.vue";

export default {
  name: "pageHome",
  components: { bmap, pageHeader,back },
  data() {
    return {
      dataOneInfo: {},
      dataOneLeftInfo:{},
      options: [],
      monthValue: "",
      colorList: [
        "#5757a5",
        "#602d53",
        "#fa2f06",
        "#51cf66",
        "#eaa76d",
        "#ed6fa4",
        "#79d224",
        "#7069a1",
        "#64bf1d",
        "#031523",
        "#044e38",
        "#7fce1e",
        "#30bb16",
        "#78c218",
        "#1e6e83",
        "#8bad05",
        "#93db3e",
        "#4765a4",
        "#5397b0",
        "#eb6b6b",
        "#37337f",
        "#2a508f",
        "#53d15f",
        "#9d91a4",
        "#44aeb8",
        "#e1a10c",
        "#8d809b",
        "#eab728",
        "#1a9244",
        "#e52e07",
      ],
      firstData: [
        {
          value: 157,
          name: "贸易",
          ratio: "52%",
        },
        {
          value: 80,
          name: "洗配煤",
          ratio: "26%",
        },
        {
          value: 23,
          name: "煤矿",
          ratio: "8%",
        },
        {
          value: 14,
          name: "非煤矿",
          ratio: "5%",
        },
        {
          value: 20,
          name: "发运",
          ratio: "7%",
        },
        {
          value: 6,
          name: "铁矿",
          ratio: "2%",
        },
        // {
        //   value: 20,
        //   name: "石料",
        //   ratio: "20%",
        // },
        // {
        //   value: 26,
        //   name: "砂厂",
        //   ratio: "26%",
        // },
        // {
        //   value: 8,
        //   name: "铝矾土",
        //   ratio: "8%",
        // },
        {
          value: 2,
          name: "焦化",
          ratio: "1%",
        },
      ],
      fourData: [
        {
          value: 847,
          name: "原煤",
          ratio: "25.2%",
        },
        {
          value: 786,
          name: "精煤",
          ratio: "23.32%",
        },
        {
          value: 570,
          name: "中煤",
          ratio: "21.44%",
        },
        {
          value: 127.6,
          name: "焦炭",
          ratio: "15.32%",
        },
        {
          value: 16.8,
          name: "煤泥",
          ratio: "7.3%",
        },
        {
          value: 50.3,
          name: "铁矿石",
          ratio: "3.1%",
        },

        {
          value: 45,
          name: "焦油",
          ratio: "2.1%",
        },
        {
          value: 136,
          name: "粗苯",
          ratio: "1.5%",
        },
        {
          value: 132.6,
          name: "兴能电煤",
          ratio: "0.25%",
        },
        {
          value: 126.6,
          name: "精矿粉",
          ratio: "0.20%",
        },
        {
          value: 16.8,
          name: "石粉",
          ratio: "0.17%",
        },
        {
          value: 67.3,
          name: "铝矿土",
          ratio: "0.1%",
        },
      ],
      firstDataObj: {}, // 1-10月企业类型
      secondData: {}, // 1-10月煤产品销售同比
      fourDataObj: {}, // 1-10月销售品种占比分析
      fiveDataObj: {}, // 1-10月销售产品环比
      thirdDataObj: {}, //  2016-2020年1-10月产品销量
      homeMiddleData: {}, // 首页轮播
      startYear:2016
    };
  },
  methods: {
    clickCompanyType(item){
      console.error(item)
      this.$router.push({path:'/companysale',query:{companyType:item.name}})
    },
    initMonth() {
      let date = new Date()
      let currentYear = parseInt(date.getFullYear())
      // currentYear -= 1;
      let arr = [];
      for (let i = this.startYear; i <= currentYear; i++) {
        arr.push({
          value: i + "",
          label: i + "年",
        });
      } 
      this.options = arr;
    },
    drawSeven() {
      let that = this;
      indexApi.dataSeven({}).then(function (res) {
        if (res.code == 200) {
          res = res.data;
          that.homeMiddleData = res;
        }
      });
    },
    handleSale() {
      this.$router.push({ path: "/sale" });
    },
    handleCompanyList(type) {
      this.$router.push({ path: "/companyList" ,query:{
        title:type
      } });
    },
    toBiling(type) {
      this.$router.push({ path: "/billing",query:{
        title:type
      } });
      // this.$router.push({ path: "/companyList" });
    },
    toBilingl(type) {
      this.$router.push({ path: "/billingl",query:{
        title:type
      } });
      // this.$router.push({ path: "/companyList" });
    },
    handleWarning() {
      this.$router.push({ path: "/earlyWarning" });
    },
    drawFirst() {
      let that = this;
      indexApi
        .dataTwo({})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.firstDataObj = res;
            that.firstData = res.lxList;
            var drawFirstCharts = document.getElementById("first-chart"); // 对应地使用ByClassName
            var drawFirstChart = echarts.init(drawFirstCharts);
            var option = {
              tooltip: {
                trigger: "item",
                formatter: "{b} : {c}户({d}%)",
              },
             
              title: {
                text: "合计",
                subtext: res.allHu + "户",
                x: "center",
                y: "center",
                top: "42%",
                left: "38%",
                textAlign: "center",
                textStyle: {
                  fontWeight: "600",
                  fontSize: that.getRealPX(18),
                  color: "#EF4864",
                },
                subtextStyle: {
                  fontWeight: "600",
                  fontSize: that.getRealPX(15),
                  color: "#EF4864",
                },
              },
              color:that.colorList,
              series: [
                {
                  name: "1-10月企业类型",
                  type: "pie",
                  radius: ["50%", "70%"],
                  center: ["40%", "50%"],
                  // roseType: "radius",
                  label: {
                    normal: {
                      show: true,
                      position: "inner",
                      formatter: function (params) {
                        return params.name + "\n" + params.percent + "%";
                      },
                      textStyle: {
                        fontWeight: "600",
                        fontSize: that.getRealPX(12),
                        color: "#fff",
                      },
                    },
                  },
                  labelLine: {
                    length: 1,
                    length2: 20,
                    smooth: true,
                  },
                  data: res.lxList,
                },
              ],
            };
            drawFirstChart.setOption(option);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    drawSecondNet() {
      let secondDataList = this.secondData.xsList || [];
      let tbListData = this.secondData.tb || [];
      let nameList = [];
      let yearList = [];
      let year2List = [];
      let tbList = [];
      for (let i = 0; i < secondDataList.length; i++) {
        let item = secondDataList[i];
        nameList.push(item.name);
        yearList.push(item.value2); // year2
        year2List.push(item.value1); // year1
        tbList.push(item.value3);
      }

      let that = this;
      var drawSecondCharts = document.getElementById("second-chart"); // 对应地使用ByClassName
      var drawSecondChart = echarts.init(drawSecondCharts);
      var xData = (xData = nameList),
        yData1 = yearList,
        yData2 = year2List,
        yData4 = tbList,
        borderData = [],
        legend = [
          this.secondData.lastYear,
          this.secondData.nowYear,
          "同比增长",
        ],
        colorArr = [
          {
            start: "rgba(4, 205, 244, 1)",
            end: "rgba(67, 144, 250, 0.9)",
          },
          {
            start: "rgba(51, 255, 153, 1)",
            end: "rgba(0, 144, 142, 1)",
          },
          {
            color: "#EF4864",
          },
        ];
      var normalColor = "rgba(255,255,255,0.5)";
      //   var fontSize = 20;
      let seriesData = [];
      [yData1, yData2, yData4].forEach((item, index) => {
        var obj1 = {};
        var obj2 = {};
        if (index < 2) {
          obj1 = {
            name: legend[index],
            type: "bar",
            stack: legend[index],
            data: item,
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colorArr[index].start + "0.7)",
                    },
                    {
                      offset: 0.5,
                      color: colorArr[index].start + "0.3)",
                    },
                    {
                      offset: 1,
                      color: colorArr[index].end,
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  //数值样式
                  color: "#04CDF4",
                  fontSize: that.getRealPX(12),
                },
              },
            },
          };
          obj2 = {
            name: "",
            type: "bar",
            stack: legend[index],
            itemStyle: {
              normal: {
                color: colorArr[index].start + "1)",
              },
            },
            data: borderData,
          };
          seriesData.push(obj1);
          seriesData.push(obj2);
        } else {
          var obj3 = {
            name: legend[index],
            type: "line",
            yAxisIndex: 1,
            smooth: false,
            symbol: "circle",
            // symbolSize: 10,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            itemStyle: {
              normal: {
                color: colorArr[index].color,
                borderColor: "#fff",
                borderWidth: 1,
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(255, 140, 140, 0.2)",
                    },
                    {
                      offset: 1,
                      color: "#FF8C8C",
                    },
                  ]),
                },
              },
            },
            data: item,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  //数值样式
                  color: "#EF4864",
                  fontSize: that.getRealPX(12),
                },
              },
            },
          };
          seriesData.push(obj3);
        }
      });

      var option = {
        grid: {
          left: "3%",
          top: "16%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          show: true,
          icon: "rect",
          itemWidth: 20,
          itemHeight: 3,
          right: "0%",
          top: "0%",
          textStyle: {
            color: "#65ABE7",
            fontSize: that.getRealPX(12),
          },
          data: legend,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var str = "";
            for (var i = 0; i < params.length; i++) {
              let unit = "";
              let value = 0;
              let extra = '';

              if (i == 2) {
                if (params[i].value < 0) {
                  unit = "-";
                }
                value = params[1].value - params[0].value;
                // unit +
                // parseInt(params[0].value / (params[i].value / 100 + 1));
              } else {
                value = params[i].value;
                extra = '年'
              }
              str +=
                params[i].name +
                ":" +
                params[i].seriesName +extra+
                (parseFloat(value).toFixed(2)) +
                "万吨" +
                "<br/>";
            }
            str +=
              params[2].name +
              ":" +
              params[2].seriesName +
              "了" +
              params[2].value +
              "%";
            ("<br/>");
            return str;
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#65C6E7",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位（万吨）",
            nameTextStyle: {
              color: "#65C6E7",
              fontSize: that.getRealPX(12),
            },
            min: 0,
            // "max": 50,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "solid",
                color: "#65C6E7",
              },
            },
          },
          {
            type: "value",
            name: "%",
            nameTextStyle: {
              fontSize: that.getRealPX(12),
              color: "#65ABE7",
            },
            min: -100,
            // max: 100,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "#65C6E7",
              },
            },
          },
        ],
        series: seriesData,
      };
      drawSecondChart.setOption(option);
    },
    drawSecond() {
      let that = this;
      indexApi
        .dataFour({})
        .then(function (res) {
          if (res.code == 200) {
            that.secondData = res.data;
            that.drawSecondNet();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    drawThirdNet() {
      let thirdList = this.thirdDataObj.xsList;
      let nameList = [],
        valueList = [],
        tbList = [];
      thirdList.map((item) => {
        nameList.push(item.name);
        let value = item.value;
        valueList.push(value == "NaN" ? "0" : value);
        let tb = item.tb;
        tbList.push(tb == "NaN" ? "0" : tb);
      });

      let valueAdd = []; 
      for (let i = 0; i < valueList.length; i++) {
        let item = valueList[i];
        if (i == 0) {
          valueAdd.push(item)
          continue;
        };
       
        valueAdd.push(item - valueList[i - 1]);
      }

      let that = this;

      var drawThirdCharts = document.getElementById("third-chart"); // 对应地使用ByClassName
      var drawThirdChart = echarts.init(drawThirdCharts);
      var xData = nameList,
        yData1 = valueList,
        yData2 = tbList,
        borderData = [],
        legend = ["年销量", "同比增长"],
        colorArr = [
          {
            start: "rgba(4, 205, 244, 1)",
            end: "rgba(67, 144, 250, 0.9)",
          },
          {
            start: "rgba(51, 255, 153, 1)",
            end: "rgba(0, 144, 142, 1)",
          },
          {
            color: "#EF4864",
          },
        ];
      var normalColor = "rgba(255,255,255,0.5)";
      //   var fontSize = 20;
      let seriesData = [];
      [yData1, yData2].forEach((item, index) => {
        var obj1 = {};
        var obj2 = {};
        if (index < 1) {
          obj1 = {
            name: legend[index],
            type: "bar",
            stack: legend[index],
            data: item,
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colorArr[index].start + "0.7)",
                    },
                    {
                      offset: 0.5,
                      color: colorArr[index].start + "0.3)",
                    },
                    {
                      offset: 1,
                      color: colorArr[index].end,
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  //数值样式
                  color: "#04CDF4",
                  fontSize: that.getRealPX(12),
                },
              },
            },
          };
          seriesData.push(obj1);
        } else {
          var obj3 = {
            name: legend[index],
            type: "line",
            yAxisIndex: 1,
            smooth: false,
            symbol: "circle",
            // symbolSize: 10,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            itemStyle: {
              normal: {
                color: "#EF4864",
                borderColor: "#fff",
                borderWidth: 1,
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(255, 140, 140, 0.2)",
                    },
                    {
                      offset: 1,
                      color: "#FF8C8C",
                    },
                  ]),
                },
              },
            },
            data: item,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  //数值样式
                  color: "#EF4864",
                  fontSize: that.getRealPX(12),
                },
              },
            },
          };
          seriesData.push(obj3);
        }
      });
      seriesData.push({
        name: "...",
        type: "line",
        // symbolSize: 0, // symbol的大小设置为0
        showSymbol: false, // 不显示symbol
        lineStyle: {
          width: 0, // 线宽是0
          color: "rgba(0, 0, 0, 0)", // 线的颜色是透明的
        },
        data: valueAdd,
      });
      var option = {
        grid: {
          left: "3%",
          top: "16%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          show: true,
          icon: "rect",
          itemWidth: 20,
          itemHeight: 3,
          right: "0%",
          top: "0%",
          textStyle: {
            color: "#65ABE7",
            fontSize: that.getRealPX(12),
          },
          data: legend,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var str = "";
            for (var i = 0; i < params.length - 1; i++) {
              let unit = "";
              let value = 0;
              if (i == 1) {
                if (params[i].value < 0) {
                  unit = "-";
                }
                value = params[2].value;
                // unit +
                // parseInt(params[0].value / (params[i].value / 100 + 1));
              } else {
                value = params[i].value;
              }
              str +=
                params[i].name +'年'+
                ":" +
                params[i].seriesName +
                (parseFloat(value).toFixed(2)) +
                "万吨" +
                "<br/>";
            }
            str +=
              params[1].name+'年' +
              ":" +
              params[1].seriesName +
              "了" +
              params[1].value +
              "%";
            ("<br/>");
            return str;
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#65C6E7",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位（万吨）",
            nameTextStyle: {
              color: "#65C6E7",
              fontSize: that.getRealPX(12),
            },
            min: 0,
            // "max": 50,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "solid",
                color: "#65C6E7",
              },
            },
          },
          {
            type: "value",
            name: "%",
            nameTextStyle: {
              fontSize: that.getRealPX(12),
              color: "#65ABE7",
            },
            // min: -100,
            // max: 100,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "#65C6E7",
              },
            },
          },
        ],
        series: seriesData,
      };
      drawThirdChart.setOption(option);
      drawThirdChart.on("click", function (params) {
        console.log(params);
      });
    },
    drawThird() {
      let that = this;
      indexApi
        .dataSix({})
        .then(function (res) {
          if (res.code == 200) {
            that.thirdDataObj = res.data;
            that.drawThirdNet();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    setMonth(month) {
      let startMonth = 1;
      let endMonth = 1;
      let monthSplit = month.split("-");

      if (monthSplit.length > 1) {
        startMonth = monthSplit[0];
        endMonth = monthSplit[1];
      }
      let arr = [];
      let i = startMonth;
      do {
        arr.push({
          value: i + "",
          label: i + "年",
        });
      } while (i++ < endMonth);
      this.options = arr;
    },
    drawfour() {
      let monthValue = this.monthValue;
      let that = this;
      indexApi
        .dataThird({ time: monthValue })
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.fourDataObj = res; 
            that.fourData = res.xsList;
            let total = 0;
            that.fourData.map(item=>{
              total+=item.value
            })
            total = parseFloat(total).toFixed(2)
            console.log(res);
            var drawFourCharts = document.getElementById("four-chart"); // 对应地使用ByClassName
            var drawFourChart = echarts.init(drawFourCharts);
            var option = {
              tooltip: {
                trigger: "item",
                formatter: "{b} : {c}万吨 ({d}%)",
              },
              title: {
                text: "总销售量",
                // subtext: res.allCount + "万吨",
                subtext: total+"万吨",
                x: "center",
                y: "center",
                top: "42%",
                left: "48%",
                textAlign: "center",
                textStyle: {
                  fontWeight: "600",
                  fontSize: that.getRealPX(18),
                  color: "#EF4864",
                },
                subtextStyle: {
                  fontWeight: "600",
                  fontSize: that.getRealPX(15),
                  color: "#EF4864",
                },
              },
              color:that.colorList,
              series: [
                {
                  name: "1-10月销售品种占比分析",
                  type: "pie",
                  radius: ["50%", "70%"],
                  center: ["50%", "50%"],
                  // roseType: "radius",
                  label: {
                    normal: {
                      show: true,
                      position: "inner",
                      formatter: function (params) {
                        return params.name + "\n" + params.percent + "%";
                      },
                      textStyle: {
                        fontWeight: "600",
                        fontSize: that.getRealPX(12),
                        color: "#fff",
                      },
                    },
                  },

                  labelLine: {
                    length: 1,
                    length2: 20,
                    smooth: true,
                  },
                  data: res.xsList,
                },
              ],
            };
            drawFourChart.setOption(option);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    drawFiveNet() {
      let thirdList = this.fiveDataObj.xsList;
      let nameList = [],
        valueList = [],
        hbList = [];
      thirdList.map((item) => {
        nameList.push(item.name);
        valueList.push(item.value);
        hbList.push(item.hb);
      });
      let valueAdd = []; 
      for (let i = 0; i < valueList.length; i++) {
        // let item = valueList[i];
        // if (i == 0) {
        //   valueAdd.push(item)
        //   continue;
        // };

     
        // valueAdd.push(item - valueList[i - 1]);
        // 上一个月份的值
        let lastYear =  parseFloat(valueList[i]) / (1 + parseFloat(hbList[i]) / 100)
        // 然后省略两个小数
        lastYear = parseFloat(lastYear).toFixed(2) 
        // 用这个月的 - 上一个月的，就是增长值
        valueAdd.push(valueList[i] - lastYear)

      }

      let that = this;
      var drawFiveCharts = document.getElementById("five-chart"); // 对应地使用ByClassName
      var drawFiveChart = echarts.init(drawFiveCharts);
      var xData = nameList,
        yData1 = valueList,
        yData2 = hbList,
        borderData = [],
        legend = ["销售量", "环比增长", "环比增长"],
        colorArr = [
          {
            start: "rgba(4, 205, 244, 1)",
            end: "rgba(67, 144, 250, 0.9)",
          },
          {
            start: "rgba(51, 255, 153, 1)",
            end: "rgba(0, 144, 142, 1)",
          },
          {
            color: "#EF4864",
          },
        ];
      // var sideData = yData1.map(item => item + 4.5);
      var normalColor = "rgba(255,255,255,0.5)";
      //   var fontSize = 20;
      let seriesData = [];
      [yData1, yData2].forEach((item, index) => {
        var obj1 = {};
        var obj2 = {};
        if (index < 1) {
          obj1 = {
            name: legend[index],
            type: "bar",
            stack: legend[index],
            data: item,
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: colorArr[index].start + "0.7)",
                    },
                    {
                      offset: 0.5,
                      color: colorArr[index].start + "0.3)",
                    },
                    {
                      offset: 1,
                      color: colorArr[index].end,
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  //数值样式
                  color: "#04CDF4",
                  fontSize: that.getRealPX(12),
                },
              },
            },
          };
          seriesData.push(obj1);
        } else {
          var obj3 = {
            name: legend[index],
            type: "line",
            yAxisIndex: 1,
            smooth: false,
            symbol: "circle",
            // symbolSize: 10,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            itemStyle: {
              normal: {
                color: "#EF4864",
                borderColor: "#fff",
                borderWidth: 1,
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(255, 140, 140, 0.2)",
                    },
                    {
                      offset: 1,
                      color: "#FF8C8C",
                    },
                  ]),
                },
              },
            },
            data: item,
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  //数值样式
                  color: "#EF4864",
                  fontSize: that.getRealPX(12),
                },
              },
            },
          };
          seriesData.push(obj3);
        }
      });

      seriesData.push({
        name: "...",
        type: "line",
        // symbolSize: 0, // symbol的大小设置为0
        showSymbol: false, // 不显示symbol
        lineStyle: {
          width: 0, // 线宽是0
          color: "rgba(0, 0, 0, 0)", // 线的颜色是透明的
        },
        data: valueAdd,
      });
      var option = {
        grid: {
          left: "3%",
          top: "16%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          show: true,
          icon: "rect",
          itemWidth: 20,
          itemHeight: 3,
          right: "0%",
          top: "0%",
          textStyle: {
            color: "#65ABE7",
            fontSize: that.getRealPX(12),
          },
          data: legend,
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var str = "";
            for (var i = 0; i < params.length - 1; i++) {
              let unit = "";
              let value = 0;
              if (i == 1) {
                if (params[i].value < 0) {
                  unit = "-";
                }
                value = params[params.length - 1].value;
                // unit +
                // parseInt(params[0].value / (params[i].value / 100 + 1));
              } else {
                value = params[i].value;
              }
              str +=
                params[i].name +"月"+
                ":" +
                params[i].seriesName +
                (parseFloat(value).toFixed(2)) +
                "万吨" +
                "<br/>";
            }
            str +=
              params[1].name +"月"+
              ":" +
              params[1].seriesName +
              "了" +
              params[1].value +
              "%";
            ("<br/>");
            return str;
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#65C6E7",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位（万吨）",
            nameTextStyle: {
              color: "#65C6E7",
              fontSize: that.getRealPX(12),
            },
            min: 0,
            // "max": 50,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "solid",
                color: "#65C6E7",
              },
            },
          },
          {
            type: "value",
            name: "%",
            nameTextStyle: {
              fontSize: that.getRealPX(12),
              color: "#65ABE7",
            },
            // min: -100,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: this.getRealPX(12),
                color: "#65ABE7",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "#65C6E7",
              },
            },
          },
        ],
        series: seriesData,
      };
      drawFiveChart.setOption(option);
    },
    drawFive() {
      let that = this;
      indexApi
        .dataFive({})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.fiveDataObj = res;
            that.drawFiveNet();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    tosearCh() {
      this.$router.push({ path: "/search" });
    },
    tolist() {
      this.$router.push({ path: "/companysale" });
    },
    tolistl() {
      this.$router.push({ path: "/companysalel" });
    },
    togslist() {
      this.$router.push({ path: "/companygslist" });
    },
    changeMonth() {
      this.drawfour();
    },
    getxssjzs() {
      let that = this;
      indexApi
        .dataOne({})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.dataOneInfo = res;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
      indexApi
        .dataOneLeft({})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.dataOneLeftInfo = res;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.initMonth();
    this.getxssjzs();
    this.drawFirst();
    this.drawSecond();
    this.drawThird();
    this.drawfour();
    this.drawFive();
    this.drawSeven();
  },
};
</script>
<style lang="stylus" scoped>
/deep/.el-select .el-input__inner {
  height: 30px;
  width: 200px;
  border-radius: 0;
  color: #ffffff;
  background-color: #0E215B;
}

/deep/.el-select .el-input .el-select__caret {
  line-height: 30px;
}

.main {
  position: relative;

  .content {
    position: absolute;
    top: 102px;
    width: 1920px;
    height: 970px;

    .item-title {
      width: 264px;
      height: 40px;
      background: url('../../assets/img/item-title.png');
      background-size: 264px 40px;
      margin-top: 6px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #DEF1FF;
      cursor: pointer;
    }

    .content-center {
      width: 613px;
      height: 610px;
      position: relative;

      .flex {
        position: absolute;
        width: 100%;
        top: 0;

        .item {
          width: 173px;
          height: 90px;
          background: url('../../assets/img/itembg.png');
          background-size: 173px 90px;
          cursor: pointer;
          margin: 0 20px;

          .tip {
            font-size: 19px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #9BDEF0;
            margin-top: 10px;
          }

          .tipnum {
            font-size: 31px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #00F1FF;
            margin-top: 12px;

            span {
              font-size: 18px;
              margin-left: 6px;
            }
          }
        }
      }
    }

    .second {
      width: 613px;
      height: 385px;
      background: url('../../assets/img/bg02.png');
      background-size: 613px 385px;
    }

    .third {
      width: 613px;
      height: 350px;
      background: url('../../assets/img/bg03.png');
      background-size: 613px 350px;
      margin-top: 10px;
    }

    .four {
      width: 613px;
      height: 455px;
      background: url('../../assets/img/bg05.png');
      background-size: 613px 455px;
    }

    .five {
      width: 613px;
      height: 495px;
      background: url('../../assets/img/bg06.png');
      background-size: 613px 495px;
      margin-top: 19px;
    }

    .first {
      width: 613px;
      height: 225px;
      background: url('../../assets/img/bg01.png');
      background-size: 613px 225px;

      .pl-5 {
        width: 242px;
        height: 35px;
        padding-left: 15px;
        background: url('../../assets/img/bg07.png');
        background-size: 242px 35px;
        margin-bottom: 5px;
        cursor: pointer;

        // img {
        // width: 68px;
        // height: 68px;
        // }
        .first-title {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          width: 100px;
          text-align: left;
        }

        .first-num {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;

          span {
            font-size: 16px;
            margin-left: 10px;
          }
        }

        .first-num.one {
          color: #EB497F;
        }

        .first-num.two {
          color: #FEDF7A;
        }

        .first-num.three {
          color: #34D160;
        }
      }
    }
  }

  .header {
    width: 1920px;
    height: 117px;
    background: url('../../assets/img/headerbg.png');
    background-size: 1920px 117px;

    .head-title {
      height: 37px;
      font-size: 40px;
      font-family: Hiragino Sans GB;
      font-weight: normal;
      color: #7EFAFC;
      margin-top: 10px;
    }

    .times {
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #39D6FE;
    }

    .days p {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #39D6FE;
    }
  }
}

#first-chart {
  width: 400px;
  height: 340px;
}

#four-chart {
  width: 400px;
  height: 350px;
}

#second-chart, #third-chart {
  width: 613px;
  height: 304px;
}

#five-chart {
  width: 613px;
  height: 449px;
}

.lengeds {
  text-align: left;
  margin-bottom: 5px;
  font-size: 16px;
  color: #40E6FF;

  .tipcolor {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-top: 4px;
  }

  .names {
    color: #ffffff;
    // margin-bottom: 6px;
  }

  .num {
    // width: 60px;
  }
}

.maxheight_chart {
  max-height: 330px;
  overflow-y: auto;
}
 
/deep/ .year_input .el-input__inner { 
  border: 1px solid #1C4DA4; 
}
</style>
